<script>
export default {
  inheritAttrs: false
}
</script>

<script setup>
import Result from './Result.vue';
import Question from './Question.vue';

defineProps({
  results: Array
})
</script>

<template>
  <div class="container">
    <Question
      :question="$attrs.question"
      :questionUserinfo="$attrs.questionUserinfo"
      @clickDelete="$attrs.onClickDeleteQuestion"
      @clickEditQuestion="$attrs.onClickEditQuestion"
      @clickReply="$attrs.onClickReply"
    />
    <div class="content">
      <el-divider>{{ results.length }}个回答</el-divider>

      <article>
        <Result
          :results="results"
          @clickDelete="$attrs.onClickDeleteResult"
          @clickEdit="$attrs.onClickEditResult"
        />
      </article>
    </div>
  </div>
</template>

<style lang="sass" scoped>

.container
  display: grid
  grid-template-rows: 120px calc(100vh - 120px)

.content
  height: 100%
  margin-top: 20px
  overflow-y: auto

  article
    width: 67.5%
    margin: 40px auto
    background-color: white
    padding: 20px
    border-radius: 4px
</style>
